﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生签到系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
        }
        input[type="text"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }
        button {
            background-color: #28a745;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 10px;
        }
        button:hover {
            background-color: #218838;
        }
        .student-info, .statistics, .signed-list, .manage-students {
            margin-top: 20px;
            padding: 10px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .student-info h2, .statistics h2, .signed-list h2, .manage-students h2 {
            margin-top: 0;
        }
        .signed-list ul, .manage-students ul {
            list-style-type: none;
            padding: 0;
        }
        .signed-list li, .manage-students li {
            margin: 5px 0;
            font-size: 16px;
        }
        .manage-students input {
            width: calc(100% - 120px);
            margin-right: 10px;
        }
        .manage-students button {
            background-color: #007bff;
        }
        .manage-students button.delete {
            background-color: #dc3545;
        }
        .export-button {
            background-color: #17a2b8;
        }
    </style>
</head>
<body>
    <h1>学生签到系统</h1>
    <div class="container">
        <!-- 签到功能 -->
        <label for="student-id">请输入学号:</label>
        <input type="text" id="student-id" placeholder="例如: 2023001">
        <button onclick="signIn()">签到</button>

        <!-- 学生信息显示 -->
        <div class="student-info" id="student-info">
            <h2>学生信息</h2>
            <p>姓名: <span id="name">-</span></p>
            <p>学号: <span id="id">-</span></p>
            <p>专业: <span id="major">-</span></p>
            <p>签到时间: <span id="sign-time">-</span></p>
        </div>

        <!-- 签到统计 -->
        <div class="statistics">
            <h2>签到统计</h2>
            <p>已签到人数: <span id="signed-count">0</span></p>
            <p>未签到人数: <span id="unsigned-count">10</span></p>
        </div>

        <!-- 已签到学生名单 -->
        <div class="signed-list">
            <h2>已签到学生名单</h2>
            <ul id="signed-students"></ul>
            <button class="export-button" onclick="exportToCSV()">导出签到信息</button>
        </div>

        <!-- 学生信息管理 -->
        <div class="manage-students">
            <h2>学生信息管理</h2>
            <input type="text" id="new-student-id" placeholder="学号">
            <input type="text" id="new-student-name" placeholder="姓名">
            <input type="text" id="new-student-major" placeholder="专业">
            <button onclick="addStudent()">添加学生</button>
            <ul id="student-list"></ul>
        </div>
    </div>

    <script>
        // 学生原始信息
        let students = [
            { id: '2023001', name: '张三', major: '计算机科学' },
            { id: '2023002', name: '李四', major: '软件工程' },
            { id: '2023003', name: '王五', major: '信息安全' },
            { id: '2023004', name: '赵六', major: '数据科学' },
            { id: '2023005', name: '孙七', major: '人工智能' },
            { id: '2023006', name: '周八', major: '网络工程' },
            { id: '2023007', name: '吴九', major: '物联网' },
            { id: '2023008', name: '郑十', major: '云计算' },
            { id: '2023009', name: '王芳', major: '大数据' },
            { id: '2023010', name: '李华', major: '区块链' }
        ];

        // 签到记录
        const signedStudents = new Map();

        // 签到功能
        function signIn() {
            const studentId = document.getElementById('student-id').value.trim();
            const student = students.find(s => s.id === studentId);

            if (student) {
                if (signedStudents.has(studentId)) {
                    alert('该学生已签到！');
                } else {
                    const signTime = new Date().toLocaleString();
                    signedStudents.set(studentId, signTime);
                    displayStudentInfo(student, signTime);
                    updateStatistics();
                    updateSignedList();
                }
            } else {
                alert('未找到该学生信息，请检查学号是否正确！');
            }
        }

        // 显示学生信息
        function displayStudentInfo(student, signTime) {
            document.getElementById('name').textContent = student.name;
            document.getElementById('id').textContent = student.id;
            document.getElementById('major').textContent = student.major;
            document.getElementById('sign-time').textContent = signTime;
        }

        // 更新统计信息
        function updateStatistics() {
            const signedCount = signedStudents.size;
            const unsignedCount = students.length - signedCount;

            document.getElementById('signed-count').textContent = signedCount;
            document.getElementById('unsigned-count').textContent = unsignedCount;
        }

        // 更新已签到学生名单
        function updateSignedList() {
            const signedList = document.getElementById('signed-students');
            signedList.innerHTML = ''; // 清空当前列表

            students.forEach(student => {
                if (signedStudents.has(student.id)) {
                    const li = document.createElement('li');
                    li.textContent = `${student.name} (${student.id}) - 签到时间: ${signedStudents.get(student.id)}`;
                    signedList.appendChild(li);
                }
            });
        }

        // 添加学生
        function addStudent() {
            const id = document.getElementById('new-student-id').value.trim();
            const name = document.getElementById('new-student-name').value.trim();
            const major = document.getElementById('new-student-major').value.trim();

            if (id && name && major) {
                if (students.some(s => s.id === id)) {
                    alert('该学号已存在！');
                } else {
                    students.push({ id, name, major });
                    updateStudentList();
                    document.getElementById('new-student-id').value = '';
                    document.getElementById('new-student-name').value = '';
                    document.getElementById('new-student-major').value = '';
                }
            } else {
                alert('请填写完整的学号、姓名和专业！');
            }
        }

        // 删除学生
        function deleteStudent(id) {
            students = students.filter(s => s.id !== id);
            updateStudentList();
        }

        // 更新学生列表
        function updateStudentList() {
            const studentList = document.getElementById('student-list');
            studentList.innerHTML = ''; // 清空当前列表

            students.forEach(student => {
                const li = document.createElement('li');
                li.innerHTML = `
                    ${student.name} (${student.id}) - ${student.major}
                    <button onclick="deleteStudent('${student.id}')" class="delete">删除</button>
                `;
                studentList.appendChild(li);
            });
        }

        // 导出签到信息为 CSV
        function exportToCSV() {
            if (signedStudents.size === 0) {
                alert('没有签到信息可导出！');
                return;
            }

            let csvContent = "data:text/csv;charset=utf-8,姓名,学号,专业,签到时间\n";
            students.forEach(student => {
                if (signedStudents.has(student.id)) {
                    csvContent += `${student.name},${student.id},${student.major},${signedStudents.get(student.id)}\n`;
                }
            });

            const encodedUri = encodeURI(csvContent);
            const link = document.createElement("a");
            link.setAttribute("href", encodedUri);
            link.setAttribute("download", "签到信息.csv");
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }

        // 初始化学生列表
        updateStudentList();
    </script>
</body>
</html>